<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="/WEB-INF/base.jspf"%>
<!DOCTYPE html>
<html>
<head>
<title>总代理用户管理</title>
<style>
	.div-c-controlBtns {
		display:flex;
		justify-content:flex-end;
		margin-bottom:16px;
	}
	.div-c-controlBtns button + button {
		margin-left:8px;
	}
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.p-c-flexwrapper > span {
		width:80px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
	#addAndEditModal .modal-body {
		display:flex;
		flex-wrap:wrap;
	}
	table th,table tr,table td {
	text-align: center;
	vertical-align:middle;
}
</style>
</head>
<body>
	<div class="div-c-controlBtns">
		<button class="btn btn-primary" id="button-i-addNewZongDaiLi">新增</button>
	</div>
<table id="table-i-zongdailiList" class="class-tableDataTable table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th style="display:none;"></th>
				<th>总代理账号</th>
				<th>真实姓名</th>
				<th>用户电话</th>
				<th>用户邮箱</th>
				<th>用户QQ</th>
				<th>用户状态</th>
				<th>用户操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form>
		            <div class="modal-body">
		            	<input id="input-i-id" hidden="hidden" class="input-auto" />
		            	<p class="p-c-flexwrapper"><span>账号：</span><input id="input-i-zhanhao" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>真实姓名：</span><input id="input-i-zhenshixingming" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper p-special1"><span>密码：</span><input id="input-i-password" type='password' class="form-control" /></p>
		            	<p class="p-c-flexwrapper p-special2"><span>确认密码：</span><input id="input-i-passwordrepeat" type='password' class="form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>电话：</span><input id="input-i-phone" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>邮箱：</span><input id="input-i-email" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>QQ：</span><input id="input-i-qq" required class="input-auto form-control" /></p>
		            </div>
		            </form>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   			
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script>
	
	bindJinYongQiYongSwitch("#table-i-zongdailiList", "editAgentStatus.do", "status")	
	$("#table-i-zongdailiList").DataTable({
      // "bPaginate": true,
      "bLengthChange": true,      
      "bSort": false,
      // "bInfo": true,
      "bAutoWidth": false,
//	         "bServerSide":true,
      'aLengthMenu':[5, 20],
       "searching": false,
       "dom": "t<'tableinfo'i<'tableSearch'p>l>",
//	    "searching": true,l
       "language": {//语言设置  
            "lengthMenu": "每页显示 _MENU_ 条记录",     
            "zeroRecords": "没有检索到数据",     
            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
            "info": "没有数据",     
            "oPaginate": {     
                "sFirst": "首页",     
                "sPrevious": "前一页",     
                "sNext": "后一页",     
                "sLast": "尾页"    
          	},
            "search":"搜索:",
            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
            "infoEmpty":      "没有找到匹配的信息",
         },
         "drawCallback": function( settings ) {
        	 $(".input-c-mySwitch").bootstrapSwitch()
         },
         "ajax": {
        	 "type": "POST",
        	 "url": "findGeneralAgentList.do",
        	 "dataSrc": function(json) {
        		 var newJson = json.data
        		 for (var i = 0; i < newJson.length; i++) {
         			 var item = newJson[i]
         			 var stateValue = ""
        			 if (item.status == "1") {
        				 stateValue = "checked"
        			 } else {
        				 stateValue = ""
        			 }
        		 	item.status = "<input class='input-c-mySwitch' data-size='small' type='checkbox' " + stateValue + " data-on-text='启用' data-on-color='success' data-off-color='danger' data-off-text='禁用' />"
        		 }
        		 return newJson
        	 },
         },
         "columns": [
					 {"data": "id", "className": "hidden-td id-edit-td"},
                     {"data": "username", "className": "zhanhao-edit-td"},
                     {"data": "realName", "className": "zhenshixingming-edit-td"},
                     {"data": "phone", "className": "phone-edit-td"},
                     {"data": "email", "className": "email-edit-td"},
                     {"data": "qq", "className": "qq-edit-td"},
                     {"data": "status", "className": ""},
                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editZongDaiLiInfo btn-sm'>修改</button><button class='btn btn-danger btn-deleteDomainItem btn-sm'>删除</button>"},
                 ]        
   		 })		
   		 insertSearchBtn()
		$("#button-i-addNewZongDaiLi").on("click", function(event) {
			$("#addAndEditModal").attr("data-type", "add")
			$("#addAndEditModal").modal("show")
		})
		$("#table-i-zongdailiList").on("click", ".btn-c-editZongDaiLiInfo", function(event) {
			$("#addAndEditModal").attr("data-type", "edit")
			var $parentTr = $(event.target).closest("tr")
			$("#addAndEditModal .input-auto").each(function(index, element) {
				$(element).val($parentTr.find("." + element.id.split("-")[2] + "-edit-td").text())
			})
			$("#addAndEditModal").modal("show")
		})
		$('#addAndEditModal').on('hidden.bs.modal', function () {
			if ($("#addAndEditModal").attr("data-type") == "edit") {
				$("#addAndEditModal form")[0].reset()
			}
		})
		
		$("#table-i-zongdailiList").on("click",".btn-deleteDomainItem",function(){
			$.ajax({
				type:"post",
				url:"/admin/deleteGeneralAgent.do",
				data:{id:$(this).parent().siblings(".id-edit-td").text()},
				success:function(){
				 $("#table-i-zongdailiList").DataTable().ajax.url("/admin/findGeneralAgentList.do").load();
					alert("删除成功");
				}
			})
		})
		
		var obj = {
			btnName: "#button-i-submitZongDaiLi",
			divName: "#addAndEditModal",
			isRegArray: [
	             {inputValue: function() {
	            	 return $("#input-i-zhanhao").val()
	            	 //用户名正则，4到16位（字母，数字，下划线，减号）
	             }, regValue:/^[a-zA-Z0-9_-]{4,16}$/, noticeText:"账号必须是4到17位(字母，数字，下划线，减号)"},
	             {inputValue: function() {
	            	 return $("#input-i-zhenshixingming").val()
	             }, regValue:/^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, noticeText:"无效的真实姓名"},
	             {inputValue: function() {
	            	 return $("#input-i-phone").val()
	             }, regValue:/^[1][3,4,5,7,8,9][0-9]{9}$/, noticeText:"无效的手机号码"},	
	             {inputValue: function() {
	            	 return $("#input-i-email").val()
	             }, regValue:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, noticeText:"无效的邮箱地址"},	
	             {inputValue: function() {
	            	 return $("#input-i-qq").val()
	             }, regValue:/^[1-9][0-9]{4,10}$/, noticeText:"无效的QQ号码"},  
	             {inputValue: function() {
	            	 return $("#input-i-rebate").val()
	             }, regValue:/^([1-9]\d{0,15}|0)(\.\d{1,4})?$/, noticeText:"无效的返点率，必须是数字，保留小数小于等于4位"},			             
	             ],
			callback: function() {
				if ($("#addAndEditModal").attr("data-type") == "add") {
					if (!$("#input-i-password").val() || !$("#input-i-passwordrepeat").val()) {
						return "密码不得为空"
					}					
					if ($("#input-i-passwordrepeat").val() != $("#input-i-password").val()) {
						return "两次密码不一致"
					}
					return checkPassWordValid($("#input-i-passwordrepeat").val())
				} else {
					return "ok"
				}
			},	
		}
		
		var ajaxObj = {
			"add": "addGeneralAgent.do",	
			"edit": "editAgent.do",
		}
		
		$('#addAndEditModal').on('show.bs.modal', function () {
			  if ($('#addAndEditModal').attr("data-type") == "add") {
				  $("#input-i-zhanhao").prop("readonly", false)
				  $(".p-special1").css("display", "flex")
				  $(".p-special2").css("display", "flex")				  
			  } else {
				  $("#input-i-zhanhao").prop("readonly", true)
				  $(".p-special1").css("display", "none")
				  $(".p-special2").css("display", "none")				  
			  }
		})
		
		checkFormMethod(obj, function() {
			var newRequest = {
				type: "post",
				data: {
					realName: $("#input-i-zhenshixingming").val(),
					phone: $("#input-i-phone").val(),
					email: $("#input-i-email").val(),
					qq: $("#input-i-qq").val()
				},
				success: function(data) {
					var newData = JSON.parse(data);
						showNoticeModal(newData.data);
						$('#addAndEditModal').modal("hide");
						$("#addAndEditModal form")[0].reset();
						$("#table-i-zongdailiList").DataTable().ajax.reload();
				},
				error: function(status) {
				}
			}
			var type = $("#addAndEditModal").attr("data-type")
			newRequest.url = ajaxObj[type]
			if (type == "edit") {
				newRequest.data.id = $("#input-i-id").val()
			} else {
				newRequest.data.password = $("#input-i-passwordrepeat").val()
				newRequest.data.username = $("#input-i-zhanhao").val()
			}
			ajax(newRequest)
		})			
		
	</script>
</body>
</html>